<template>
  <div>
    <router-view></router-view>
    <!--  分割线-->
    <el-divider></el-divider>
    <!--    高级查询-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.teamName" placeholder="团队名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.teamPrincipal" placeholder="团队负责人"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formInline.teamMember" placeholder="团队成员"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="getHrTeam">查询</el-button>
      </el-form-item>
      <!--    添加团队按钮-->
      <el-button type="primary" plain @click="insertUpdateTeam = true">添加团队</el-button>
    </el-form>
    <!--    团队添加修改对话框-->
    <el-dialog title="编辑团队" :visible.sync="insertUpdateTeam" center>
      <!--  分割线-->
      <el-divider></el-divider>
      <!--     对话框弹出的表单-->
      <el-form :label-position="labelPosition" :rules="rules" label-width="100px" :model="insertUpdateForm">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="团队名称:" prop="teamName">
              <el-input v-model="insertUpdateForm.teamName" placeholder="团队名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="团队负责人:" prop="teamPrincipal">
              <el-select clearable style="width: 100%" v-model="insertUpdateForm.teamPrincipal" placeholder="--请选择团队负责人--">
                <el-option
                    v-for="su in hrEmpData"
                    :key="su.id"
                    :label="su.teamPrincipal"
                    :value="su.empName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="团队成员:" prop="teamMembers">
              <!--  @change="$forceUpdate()强制刷新 -->
              <el-select style="width: 100%" multiple v-model="insertUpdateForm.teamMembers" @change="$forceUpdate()"
                         placeholder="--请选择团队成员--">
                <el-option
                    v-for="su in hrEmpData"
                    :key="su.id"
                    :label="su.teamMember"
                    :value="su.empName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="团队介绍:">
          <el-input type="textarea" v-model="insertUpdateForm.teamIntro"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="insertUpdateTeam = false">取 消</el-button>
        <el-button type="primary" plain @click="addUpdateHrTeam">确定提交</el-button>
      </div>
    </el-dialog>

    <!--    团队查看对话框-->
    <el-dialog title="团队详情" :visible.sync="selectTeam" center>
      <!--  分割线-->
      <el-divider></el-divider>
      <!--     对话框弹出的表单-->
      <el-form :label-position="labelPosition" label-width="100px" :model="selectForm">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="团队名称:">
              <el-input :disabled="true" v-model="selectForm.teamName" placeholder="团队名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="团队负责人:">
              <el-input :disabled="true" v-model="selectForm.teamPrincipal" placeholder="团队名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="团队成员:">
              <el-input :disabled="true" v-model="selectForm.teamMember" placeholder="团队名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="团队介绍:">
          <el-input type="textarea" :disabled="true" v-model="selectForm.teamIntro"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--  查询表格-->
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="序号">
      </el-table-column>
      <el-table-column
          prop="teamName"
          label="团队名称">
      </el-table-column>
      <el-table-column
          prop="teamPrincipal"
          label="团队负责人">
      </el-table-column>
      <el-table-column
          prop="teamMember"
          label="团队成员">
      </el-table-column>
      <el-table-column
          prop="teamIntro"
          label="团队介绍">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-dropdown trigger="click">
            <el-button type="primary" plain>
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="selectItem(scope.row.id)">查看</el-dropdown-item>
              <el-dropdown-item @click.native="updateTeam(scope.row.id)">修改</el-dropdown-item>
              <el-dropdown-item @click.native="deleteItem(scope.row.id)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <!--      分页-->
    <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :page-sizes="[2, 4, 6, 8]"
        :total="pageData.total"
        :page-size="formInline.pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "HrTeam.vue",
  data() {
    return {
      //获取id
      id: this.$route.params.id,
      labelPosition: 'right',//添加表单顶部对齐
      pageData: {},//获取返回的数据，做分页用
      tableData: [],//表格查询
      hrEmpData: [],//团队下拉框数据
      formInline: {//表单高级查询
        teamName: '',
        teamPrincipal: '',
        teamMember: '',
        pageId: 1,//当前页
        pageNum: 2,//每页显示几条数据
      },
      insertUpdateTeam: false,//点击打开添加弹框
      selectTeam: false,//点击打开查看对话框
      //添加修改界面数据重置
      insertUpdateForm: {
        teamMember: '',
        teamPrincipal: '',
        teamMembers: []
      },
      //查看界面数据重置
      selectForm: {
        teamMember: '',
        teamPrincipal: '',
        teamIntro: '',
        teamMembers: []
      },
      rules: {//小红星验证
        teamName: [
          {required: true, message: '请输入团队名称', trigger: 'blur'}
        ],
        teamPrincipal: [
          {required: true, message: '请选择团队负责人', trigger: 'change'}
        ],
        teamMembers: [
          {type: 'array', required: true, trigger: 'change', message: '团队成员不能为空'}
        ]
      }
    }
  },
  created() {
    this.getHrTeam();
    this.getHrEmpData();
  },
  methods: {
    //高级查询团队信息
    getHrTeam() {
      this.$http
          .get("hrTeam", {params: this.formInline})
          .then((res) => {
            this.tableData = res.data.data.list;
            this.pageData = res.data.data; // 返回的分页参数   pageinit
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    // //根据id查询团队信息
    getHrTeamId(id) {
      this.$http
          .get(`hrTeam/${id}`)
          .then((res) => {
            this.insertUpdateForm = res.data.data[0];
            this.insertUpdateForm.teamMembers = res.data.data[0].teamMember.split(',')
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //查看团队
    selectItem(id) {
      this.selectTeam = true;
      this.$http
          .get(`hrTeam/${id}`)
          .then((res) => {
            this.selectForm = res.data.data[0];
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //修改按钮弹出对话框
    updateTeam(id) {
      this.getHrTeamId(id)
      this.insertUpdateTeam = true
    },
    //查询团队信息下拉框
    getHrEmpData() {
      this.$http
          .get("hrEmp", {params: {"chaxun": "1"}})
          .then((res) => {
            this.hrEmpData = res.data.data.list;
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //添加修改团队信息
    addUpdateHrTeam() {
      if (this.insertUpdateForm.id == null) {
        this.insertUpdateForm.teamMember = this.insertUpdateForm.teamMembers.join(',')
        this.$http.post(`hrTeam`, this.insertUpdateForm)
            .then(() => {
                  this.$notify({
                    type: "success",
                    message: "添加成功"
                  }),
                      this.insertUpdateTeam = false
                      this.getHrTeam()
                }
            )
            .catch(function (error) {
              console.log(error);
            });
      } else {
        this.insertUpdateForm.teamMember = this.insertUpdateForm.teamMembers.join(',')
        this.$http.put(`hrTeam`, this.insertUpdateForm)
            .then(() => {
                  this.$notify({
                    type: "success",
                    message: "修改成功"
                  })
                  this.insertUpdateTeam = false
                  this.getHrTeam()
                  this.insertUpdateForm.id=null
                  this.insertUpdateForm.teamName=null
                  this.insertUpdateForm.teamPrincipal=null
                  this.insertUpdateForm.teamMembers=null
                  this.insertUpdateForm.teamIntro=null
                }
            )
            .catch(function (error) {
              console.log(error);
            });
      }
    },
    //删除团队信息
    deleteItem(id) {
      this.$http.delete(`hrTeam/${id}`)
          .then(() => {
                this.$notify({
                  type: "success",
                  message: "删除成功"
                }),
                    this.getHrTeam()
              }
          )
          .catch(function (error) {
            console.log(error);
          });
    },
    //每页显示几条
    handleCurrentChange(val) {
      this.formInline.pageId = val; //动态改变
      this.getHrTeam();
    },
    //显示几页
    handleSizeChange(val) {
      this.formInline.pageNum = val;
      this.getHrTeam();
    },

  }
}
</script>

<style scoped>

</style>